<!--
 Copyright (C), 2018, NanJu Tech. Co., Ltd.
 Author:       wunan
 Version:      1.0
 Date:         2018/10/6
 Description:  佣金明细列表
 -->
<template>
  <div>
		<title-bar :title="'佣金明细'" />
    <van-panel style="margin-bottom: 10px;margin-top: 46px;">
      <div slot="header" class="van-panel__title van-cell" style="display: block;">
        <div style="color: red;">已确认佣金</div>
        <div class="confirm_text"><b>{{confirmCommission}}</b></div>
      </div>
      <div slot="footer" class="flex">
        <span>累计佣金</span>
        <div class="van-cell__value total_text"><span>{{total}}</span></div>
      </div>
    </van-panel>
    <van-tabs :active="activeIndex" @click="handleTabClick" sticky>
      <van-tab v-for="(tabItem, i) in tabItems" :key="i" :title="tabItem.title">
        <van-list v-model="loading" class="scroll-load" :finished="finished" :immediate-check="false" :offset="100" @load="loadMore">
          <van-cell-group v-for="order in items" :key="order.id" style="margin-bottom: 10px;">
              <van-cell :title="'订单编号: ' + order.sn" />
              <van-cell v-for="goods in order.goods" :key="goods.id">
                <order-item :goods="goods" :checkbox="false" :stepper="false">
                    <div slot="right-text" style="font-size: 12px;">
                        {{goods.isGrant ? '已确认：' : '未确认：'}}
                        <span class="total_text" style="font-size: 16px;"><span>{{goods.commission.toFixed(2)}}</span></span>
                    </div>
                </order-item>
              </van-cell>
              <van-cell :title="'下单人：' + order.userName" :label="order.createTime">
                  <div slot="right-icon" style="line-height: 35px;">佣金总计：<span class="total_text"><span>{{order.totalCommission.toFixed(2)}}</span></span></div>
              </van-cell>
          </van-cell-group>
        </van-list>
        <is-empty v-if="isEmpty">没有找到符合条件的记录</is-empty>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import {
  Panel,
  Tabs,
  Tab
} from 'vant';
import IsEmpty from "@/vue/components/is-empty/";
import loadMore from "@/vue/mixin/list-load-more";
import OrderItem from '@/views/order/order-item';
import TitleBar from '@/vue/components/title-bar/';
import {
  COMMISSION_LOG,
  COMMISSION_TOTAL
} from "@/api/user";

export default {
  mixins: [loadMore],
  data() {
    return {
      tabItems: [{
        title: '全部'
      }, {
        title: '已确认',
        status: 1
      }, {
        title: '待确认',
        status: 0
      }],
      shopId: this.getUser().id,
      confirmCommission: 0,
      total: 0,
      activeIndex: 0
    }
  },
  created() {
    this.$reqGet(COMMISSION_TOTAL, {memberId: this.shopId, isGrant: 1}).then(res => {
        this.confirmCommission = res.data.data.toFixed(2);
    });
    this.$reqGet(COMMISSION_TOTAL, {memberId: this.shopId}).then(res => {
        this.total = res.data.data.toFixed(2);
    });

    this.resetInit();
  },

  methods: {
    initData() {
      const status = this.tabItems[this.activeIndex].status;
      return this.$reqGet(
        COMMISSION_LOG, {
          mid: this.shopId,
          type: 1,
          isGrant: status,
          offset: (this.pages.currPage - 1) * this.pages.perPage,
          limit: this.pages.perPage
        }, {
          hideLoading: true
        }).then(res => {
        const {
          total,
          rows,
        } = res.data.data;
        let orders = this.items;

        rows.forEach(item => {
          let order = orders[item.orderId];
          if (!order) {
            order = {
              id: item.orderId,
              sn: item.orderSn,
              createTime: item.createTime,
              status: item.orderStatus,
              statusText: item.orderStatusName,
              userName:item.sName,
              totalCommission: 0,
              goods: []
            };

            orders[order.id] = order;
          }
          order.totalCommission += item.commission;
          order.goods.push({
            id: item.orderProductId,
            productId: item.productId,
            title: item.productName,
            optionname: item.optionName,
            thumb: item.thumbSquare || item.thumb,
            total: item.total,
            isGrant: item.isGrant,
            commission: item.commission,
            marketprice: item.marketPrice
          });
        });

        this.items = orders.filter(item => !!item);
        return {
          pageCount: rows.length,
          totalCount: total
        };
      });
    },
    handleTabClick(index) {
        this.activeIndex = index;
        this.resetInit();
    },
 },

  components: {
    [Panel.name]: Panel,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [IsEmpty.name]: IsEmpty,
    [OrderItem.name]: OrderItem,
		[TitleBar.name]: TitleBar
  }
}
</script>
<style lang="scss" scoped>
.confirm_text {
    font-size: 32px;
    color: $red;
    text-align: center;
    padding: 20px 0;
    ::before {
        content: "¥";
        font-size: 10px;
        margin-right: 3px;
    }
}
.total_text {
    font-size: 18px;
    color: $red;
    ::before {
        content: "¥";
        font-size: 8px;
        margin-right: 3px;
    }
}
</style>

